<template>
  <div class="main-viewer bg-background">
    <MediaViewer
      v-model="currIndex"
      :items="fetcher.dataList"
      :active="active"
      :ready="ready"
      :loading="fetcher.loading"
      :disable-transition="disableTransition"
      @click:avatar="next"
      @click:tag="nextToTagList"
      @to-end="fetcher.nextPage"
    ></MediaViewer>
    <ViewerHead
      v-if="mainViewerType === MAIN_VIEWER_TYPE.VIDEO_PHOTO"
      class="head"
      v-model="mediaType"
      :tab-options="tabOptions"
      v-show="!videoFullscreen"
      @back="$emit('back')"
    ></ViewerHead>
    <div v-if="mainViewerType === MAIN_VIEWER_TYPE.NONE" class="back" @click="$emit('back')">
      <Icon size="28" class="pointer" name="back"></Icon>
    </div>
  </div>
</template>

<script setup>
import { inject, ref, toRef } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useCurrentViewer } from '@/compositions/viewer/currentViewer'
import { MEDIA_TYPE } from '@/constant'
import { MAIN_VIEWER_TYPE } from '@/constant/viewer-router'
import ViewerHead from '../Head.vue'
import MediaViewer from '../MediaViewer.vue'

const props = defineProps({
  index: { type: Number, required: true },
  active: { type: Boolean, required: true },
  ready: { type: Boolean, required: true },
})

defineEmits(['back'])

const appStore = useAppStore()
const { videoFullscreen } = storeToRefs(appStore)

const viewerRouter = inject('viewerRouter')
const { disableTransition, mainViewerType, next, nextToTagList } = viewerRouter

const { mediaType, currIndex, fetcher, bindCreatorUpdate } = useCurrentViewer(viewerRouter, props.index)
bindCreatorUpdate(toRef(() => props.active))

const tabOptions = ref([
  { label: 'info.media.video', value: MEDIA_TYPE.VIDEO },
  { label: 'info.media.photo', value: MEDIA_TYPE.PHOTO },
])
</script>

<style lang="scss" scoped>
.main-viewer {
  width: 100%;
  height: 100%;
  position: relative;

  .head {
    position: absolute;
    top: 0.5rem;
  }

  .back {
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
}
</style>
